<template>

  <!--头部主体-->
  <el-form ref="ruleForm" :model="form" label-width="80px" size="small" label-position="right"
  >
    <el-row>
      <!--        第一行-->
      <el-col :span="12">
        <span data-v-1c7abcf7="" style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
      </el-col>
      <el-col :span="12" class="elcolone-two">
        <el-row type="flex" justify="end">
          <el-button size="small" type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题
          </el-button>
        </el-row>
      </el-col>
      <!--        第二行-->
      <el-col :span="6">
        <el-form-item label="学科" prop="subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option v-for="item in subjectIDBody"
                       :key="item.value"
                       :label="item.label"
                       :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option v-for="obj in catalogIDBody"
                       :key="obj.value"
                       :value="obj.label"
                       :label="obj.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标签" prop="tags">
          <el-select v-model="form.tags" placeholder="请选择">
            <el-option v-for="item in tagsBody"
                       :key='item.value'
                       :value="item.label"
                       :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="form.keyword" placeholder="根据题干搜索">
          </el-input>
        </el-form-item>
      </el-col>

      <!--        第三行-->
      <el-col :span="6">
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="form.questionType" placeholder="请选择">
            <el-option v-for="item in questionType"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option v-for="item in difficulty"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option v-for="(item,index) in direction"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人" prop="creator">
          <el-select v-model="form.creator" placeholder="请选择">
            <el-option v-for="item in creatorBody"
                       :key='item.id'
                       :value="item.username"
                       :label="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--        第四行-->
      <el-col :span="6">
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="form.remarks">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="form.shortName">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="城市">

          <el-row type="flex" justify="start" gutter="5">
            <el-col>
              <el-form-item prop="city">
                <el-select v-model="form.city" placeholder="请选择">
                  <el-option v-for="(item,index) in citys"
                             :key='index'
                             :value="item"
                             :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item prop="province">
                <el-select v-model="form.province" placeholder="请选择">
                  <el-option v-for="(item,index) in provinces"
                             :key='index'
                             :value="item"
                             :label="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form-item>
      </el-col>
      <el-col :span="6">

        <el-row type="flex" justify="end">
          <el-button size="small" @click="()=>this.$emit('btnResetFields')">重置</el-button>
          <el-button size="small" type="primary" @click="()=>this.$emit('liqiushi')">搜索</el-button>
        </el-row>

      </el-col>
    </el-row>
  </el-form>

</template>

<script>
import { difficulty, direction, questionType } from '@/api/hmmm/constants'
import { citys, provinces } from '@/api/hmmm/citys'

export default {
  name: 'quertions-randoms-hard-liqiushi',

  props: {
    subjectIDBody: {
      type: Array,
      required: true
    },
    catalogIDBody: {
      type: Array,
      required: true
    },
    tagsBody: {
      type: Array,
      required: true
    },
    creatorBody: {
      type: Array,
      required: true
    },
    form: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      questionType,
      difficulty,
      direction,
      citys: provinces(),
      provinces: []
    }
  },
  watch: {
    'form.city': {
      handler (newValue) {
        if (newValue) {
          this.provinces = citys(newValue)
        }
      }
    }
  }

}
</script>

<style scoped lang="scss">

.el-form-item {
  margin-right: 0 !important;
}

.el-form-item__label {
  position: absolute;
}

.el-form-item__content {
  width: 100%;
  padding-left: 80px;
}

.el-select,
.el-input_inner {
  width: 100%;
}

// 自定义css
.elcolone-two {
  margin-bottom: 15px;
}
</style>
